<template>
  <div>
    <div class="comment">
      <h2>
        <span>评论</span>
        <span class="part__tit_desc">共 {{commentList.length}} 条评论</span>
      </h2>
      <div class="comment-msg">
        <el-input
          class="comment-input"
          type="textarea"
          placeholder="期待您的精彩评论..."
          :rows="2"
          v-model="textarea">
        </el-input>
      </div>
      <el-button type="primary" class="sub-btn" @click="postComment()">发表评论</el-button>
    </div>
    <ul class="popular" v-for="(item, index) in commentList" :key="index">
      <li>
        <div class="popular-img">
          <img :src="attachImageUrl(userPic[index])" alt="">
        </div>
        <div class="popular-msg">
          <ul>
            <li class="name">{{userName[index]}}</li>
            <li class="content">{{item.content}}</li>
            <li class="time">{{item.createTime}}</li>
          </ul>
        </div>
        <div class="up" ref="up">
          <svg class="icon" aria-hidden="true" @click="postUp(item.id, item.up, index)">
            <use :xlink:href="ZAN"></use>
          </svg>
          {{item.up}}
          <i class="el-icon-delete" @click="clickEvent(item.id)" v-if="isMe[index]"/>
          <el-dialog
            title="删除评论"
            width="30%"
            :visible.sync="confirmDel">
            <span>确定删除该评论？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="confirmDel = false">取 消</el-button>
              <el-button type="primary" @click="deleteComment">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import mixin from '../mixin'
import { mapGetters } from 'vuex'
import { HttpManager } from '../api/index'
import { ICON } from '../assets/icon/index'

export default {
  name: 'comment',
  mixins: [mixin],
  props: {
    playId: Number // 歌曲ID或歌单ID
  },
  data () {
    return {
      commentList: [], // 存放评论内容
      userPic: [], // 保存评论用户头像
      userName: [], // 保存评论用户名字
      textarea: '', // 存放输入内容
      isMe: [], // 是否为当前用户的评论
      myUserName: '', // 当前用户的用户名
      delId: -1,
      confirmDel: false, //确认删除
      ZAN: ICON.ZAN
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'userId', // 用户ID
      'index', // 列表中的序号
      'loginIn', // 用户是否登录
      'avator' // 用户头像
    ])
  },
  watch: {
    id () {
      this.getComment()
    }
  },
  mounted () {
    this.getComment()
    this.getMsg(this.userId)
  },
  methods: {
    getMsg (id) {
      if(id !== ''){
        HttpManager.getUserOfId(id)
          .then(res => {
            this.myUserName = res[0].username
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 获取所有评论
    getComment () {
      HttpManager.getAllComment(this.playId)
        .then(res => {
          this.commentList = res
          // console.log(res);
          for (let item of res) {
            this.getUsers(item.userId)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取评论用户的昵称和头像
    getUsers (id) {
      HttpManager.getUserOfId(id)
        .then(res => {
          this.userPic.push(res[0].avator)
          this.userName.push(res[0].username)
          if(this.myUserName === res[0].username) {
            this.isMe.push(true)
          }
          else {
            this.isMe.push(false)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 提交评论
    postComment () {
      // 评论为空
      if(this.textarea === '' || this.textarea.length === 0){
        this.notify('评论不能为空噢~','warning')
      }
      // 已登录
      else if (this.loginIn) {
        let params = new URLSearchParams()
        params.append('songId', this.playId)
        params.append('type', 0)
        params.append('userId', this.userId)
        params.append('content', this.textarea)
        HttpManager.setComment(params)
          .then(res => {
            if (res.code === 1) {
              this.textarea = ''
              this.getComment()
              this.notify('评论成功！审核中，请耐心等待~', 'success')
            } else {
              this.notify('评论失败', 'error')
            }
          })
          .catch(err => {
            this.notify('评论失败', 'error')
            console.log(err)
          })
      } else {
        this.notify('请先登录', 'warning')
      }
    },
    // 点赞
    postUp (id, up, index) {
      // console.log('点赞'+id);
      if (this.loginIn) {
        let params = new URLSearchParams()
        params.append('id', id)
        params.append('up', up + 1)
        HttpManager.setLike(params)
          .then(res => {
            if (res.code === 1) {
              this.$refs.up[index].children[0].style.color = '#2796dd'
              this.getComment()
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        this.notify('请先登录', 'warning')
      }
    },
    clickEvent (id) {
      this.delId = id
      this.confirmDel = true
    },
    // 删除评论
    deleteComment () {
      this.confirmDel = false
      // console.log(this.delId);
      if (this.loginIn) {
        HttpManager.deleteComment(this.delId)
          .then(res => {
            if(res.code === 1){
              this.getComment()
              this.notify('删除成功', 'success')
            }
            else {
              this.notify('删除失败', 'error')
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        this.notify('请先登录', 'warning')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/comment.scss';
</style>
